<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF转HTML工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .content {
            padding: 40px;
        }

        .upload-section {
            border: 3px dashed #007bff;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin-bottom: 30px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .upload-section:hover {
            border-color: #0056b3;
            background: #e9ecef;
        }

        .upload-section.dragover {
            border-color: #28a745;
            background: #d4edda;
        }

        .file-input {
            display: none;
        }

        .upload-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .upload-btn:hover {
            background: #0056b3;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,123,255,0.3);
        }

        .file-info {
            margin-top: 20px;
            padding: 15px;
            background: #e9ecef;
            border-radius: 8px;
            display: none;
        }

        .convert-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 25px;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 20px;
        }

        .convert-btn:hover {
            background: #218838;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40,167,69,0.3);
        }

        .convert-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .sample-section {
            margin-top: 40px;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 10px;
            text-align: center;
        }

        .sample-btn {
            background: #17a2b8;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 20px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sample-btn:hover {
            background: #138496;
            transform: translateY(-2px);
        }

        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #007bff;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .result {
            margin-top: 30px;
            padding: 20px;
            background: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 8px;
            display: none;
        }

        .error {
            background: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }

        .success {
            background: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }

        .download-link {
            display: inline-block;
            background: #007bff;
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 5px;
            margin-top: 10px;
            transition: background 0.3s ease;
        }

        .download-link:hover {
            background: #0056b3;
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>PDF转HTML工具</h1>
            <p>将PDF文档转换为美观的HTML格式</p>
        </div>
        
        <div class="content">
            <form id="uploadForm" enctype="multipart/form-data">
                <div class="upload-section" id="uploadSection">
                    <input type="file" id="fileInput" class="file-input" accept=".pdf" name="file">
                    <button type="button" class="upload-btn" onclick="document.getElementById('fileInput').click()">
                        📁 选择PDF文件
                    </button>
                    <p>或者将PDF文件拖拽到此处</p>
                    <div class="file-info" id="fileInfo"></div>
                </div>
                
                <button type="submit" class="convert-btn" id="convertBtn" disabled>
                    开始转换
                </button>
            </form>

            <div class="loading" id="loading">
                <div class="spinner"></div>
                <p>正在转换PDF文件，请稍候...</p>
            </div>

            <div class="result" id="result"></div>

            <div class="sample-section">
                <h3>快速体验</h3>
                <p>点击下方按钮转换项目中的示例PDF文件</p>
                <button class="sample-btn" onclick="convertSample()">
                    转换示例PDF
                </button>
            </div>
        </div>
    </div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const uploadSection = document.getElementById('uploadSection');
        const fileInfo = document.getElementById('fileInfo');
        const convertBtn = document.getElementById('convertBtn');
        const uploadForm = document.getElementById('uploadForm');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');

        // 文件选择处理
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                showFileInfo(file);
                convertBtn.disabled = false;
            }
        });

        // 拖拽处理
        uploadSection.addEventListener('dragover', function(e) {
            e.preventDefault();
            uploadSection.classList.add('dragover');
        });

        uploadSection.addEventListener('dragleave', function(e) {
            e.preventDefault();
            uploadSection.classList.remove('dragover');
        });

        uploadSection.addEventListener('drop', function(e) {
            e.preventDefault();
            uploadSection.classList.remove('dragover');
            
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                const file = files[0];
                if (file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf')) {
                    fileInput.files = files;
                    showFileInfo(file);
                    convertBtn.disabled = false;
                } else {
                    showError('请选择PDF文件格式');
                }
            }
        });

        // 显示文件信息
        function showFileInfo(file) {
            fileInfo.style.display = 'block';
            fileInfo.innerHTML = `
                <strong>文件名:</strong> ${file.name}<br>
                <strong>大小:</strong> ${(file.size / 1024 / 1024).toFixed(2)} MB<br>
                <strong>类型:</strong> ${file.type}
            `;
        }

        // 表单提交处理
        uploadForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData();
            const file = fileInput.files[0];
            
            if (!file) {
                showError('请选择PDF文件');
                return;
            }

            formData.append('file', file);
            
            showLoading();
            
            fetch('/pdf/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                    return response.text().then(text => {
                        throw new Error(text);
                    });
                }
            })
            .then(html => {
                hideLoading();
                showSuccess('转换成功！', html);
            })
            .catch(error => {
                hideLoading();
                showError('转换失败: ' + error.message);
            });
        });

        // 转换示例PDF
        function convertSample() {
            showLoading();
            
            fetch('/pdf/convert-sample')
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                    return response.text().then(text => {
                        throw new Error(text);
                    });
                }
            })
            .then(html => {
                hideLoading();
                showSuccess('示例PDF转换成功！', html, 'sample_pdf');
            })
            .catch(error => {
                hideLoading();
                showError('转换失败: ' + error.message);
            });
        }

        // 显示加载状态
        function showLoading() {
            loading.style.display = 'block';
            result.style.display = 'none';
        }

        // 隐藏加载状态
        function hideLoading() {
            loading.style.display = 'none';
        }

        // 显示成功信息
        function showSuccess(message, html, customFileName = null) {
            result.className = 'result success';
            result.style.display = 'block';
            
            // 获取原文件名（去掉.pdf扩展名）
            let originalFileName;
            if (customFileName) {
                originalFileName = customFileName;
            } else if (fileInput.files[0]) {
                originalFileName = fileInput.files[0].name.replace(/\.pdf$/i, '');
            } else {
                originalFileName = 'converted';
            }
            
            result.innerHTML = `
                <h4>✅ ${message}</h4>
                <p>HTML内容已生成，您可以：</p>
                <a href="data:text/html;charset=utf-8,${encodeURIComponent(html)}" 
                   download="${originalFileName}.html" class="download-link">
                    📥 下载HTML文件 (${originalFileName}.html)
                </a>
                <button onclick="previewHtml('${btoa(unescape(encodeURIComponent(html)))}')" 
                        style="background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin-left: 10px; cursor: pointer;">
                    👁️ 预览HTML
                </button>
            `;
        }

        // 显示错误信息
        function showError(message) {
            result.className = 'result error';
            result.style.display = 'block';
            result.innerHTML = `<h4>❌ ${message}</h4>`;
        }

        // 预览HTML
        function previewHtml(base64Html) {
            try {
                const html = decodeURIComponent(escape(atob(base64Html)));
                const newWindow = window.open('', '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes');
                
                if (newWindow) {
                    newWindow.document.write(html);
                    newWindow.document.close();
                    newWindow.focus();
                } else {
                    // 如果弹窗被阻止，尝试使用data URL
                    const dataUrl = 'data:text/html;charset=utf-8;base64,' + base64Html;
                    window.open(dataUrl, '_blank');
                }
            } catch (error) {
                console.error('预览HTML时出错:', error);
                // 备用方法：直接在当前页面显示
                showHtmlInPage(base64Html);
            }
        }

        // 备用预览方法：在当前页面显示HTML
        function showHtmlInPage(base64Html) {
            try {
                const html = decodeURIComponent(escape(atob(base64Html)));
                const previewDiv = document.createElement('div');
                previewDiv.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: white;
                    z-index: 9999;
                    overflow: auto;
                    padding: 20px;
                `;
                
                const closeBtn = document.createElement('button');
                closeBtn.innerHTML = '✕ 关闭预览';
                closeBtn.style.cssText = `
                    position: fixed;
                    top: 10px;
                    right: 10px;
                    background: #dc3545;
                    color: white;
                    border: none;
                    padding: 10px 15px;
                    border-radius: 5px;
                    cursor: pointer;
                    z-index: 10000;
                `;
                closeBtn.onclick = function() {
                    document.body.removeChild(previewDiv);
                    document.body.removeChild(closeBtn);
                };
                
                previewDiv.innerHTML = html;
                document.body.appendChild(previewDiv);
                document.body.appendChild(closeBtn);
            } catch (error) {
                console.error('备用预览方法也失败:', error);
                alert('预览失败，请尝试下载HTML文件后在浏览器中打开');
            }
        }
    </script>
</body>
</html> 